<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>貌似是第一个</title>
  <script src="three.min.js"></script>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script>
  function init() {
    var renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById('mainCanvas')
    });
    renderer.setClearColor(0x000000);

    // 场景
    var scene = new THREE.Scene();

    // 相机
    var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
    camera.position.set(0, 0, 5);
    scene.add(camera);  // 加入场景

    // 定义一个长方体
    var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
        new THREE.MeshBasicMaterial({
          color: 0xff0000
        })
    );
    scene.add(cube);

    // 渲染
    renderer.render(scene, camera);
  }
</script>
<!-- ----------------------------------------------------------

	Three.js官网文档中的一些重要的对象
		http://www.ituring.com.cn/article/48067

	DOC
		https://threejs.org/docs/?q=extureLoader#Reference/Loaders/ImageLoader

	Cameras（照相机，控制投影方式）
		- Camera
		- OrthographicCamera
		- PerspectiveCamera

	Core（核心对象）
	  - BufferGeometry
    - Clock（用来记录时间）
    - EventDispatcher
    - Face3
    - Face4
    - Geometry
    - Object3D
    - Projector
    - Raycaster（计算鼠标拾取物体时很有用的对象）

	Lights（光照）
		- Light
    - AmbientLight
    - AreaLight
    - DirectionalLight
    - HemisphereLight
    - PointLight
    - SpotLight

	Loaders（加载器，用来加载特定文件）
	Materials（材质，控制物体的颜色、纹理等）
	Math（和数学相关的对象）
	Objects（物体）
	Renderers（渲染器，可以渲染到不同对象上）
	Renderers / Renderables
	Scenes（场景）
	Textures（纹理）
	···
	Extras / Geometries（几何形状）
	...


  * example *
  雪花 http://www.tuicool.com/articles/QVFNnaM

------------------------------------------------------------ -->
</body>
</html>